<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.Enumeration"%>
<%@ page import="java.util.Collection"%>
<%@ page import="org.springframework.prospring.ticket.domain.Club"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<%
Enumeration  e = request.getAttributeNames();
    while (e.hasMoreElements()) {
        String attirbuteName = (String) e.nextElement();

        System.out.println("###############################  attirbuteName = " + attirbuteName);

    }

    Collection myClubs = (Collection) request.getAttribute("clubs");
    if (myClubs != null) {
        for (java.util.Iterator iterator = myClubs.iterator(); iterator.hasNext();) {
            Club club = (org.springframework.prospring.ticket.domain.Club) iterator.next();
            System.out.println("club.getId() = " + club.getId());
        }
    }
%>

<script language="JavaScript" type="text/javascript">

    function submitForm(regionId, clubId) {
        var form = document.getElementById("reservationFieldRequestForm")
        form.regionId.value = regionId;
		form.clubId.value = clubId;
		form.submit();
	}

</script>

<!-- generally javascript should go in a separate file -->
<script type="text/javascript">
   $(document).ready(function() {
      // event listeners
       $("select[name^=regionSelect]").bind('change', loadClubsByRegionId);
       $("select[name^=make]").bind('change', loadModels);
      $("select[name^=model]").bind('change', loadYears);
   });

   // When a make is selected, populate the models dropdown
   function loadClubsByRegionId() {
       alert("loadClubsByRegionId - alexis this.value="+this.value);
      $.getJSON("findClubsById.dahtml",     // url
         { regionId: this.value },   // request params
         function(json){           // callback
            var rows = '';
            $(json.list.Club).each(function() {
                rows += '<tr><td>' + this.id +' ' + this.name + ' ' + this.mail + '</td></tr>';
            });
             $("#clubsListTable tbody").html(rows);
         }
      );
   }

   // When a make is selected, populate the models dropdown
   function loadModels() {
       alert("alexis this.value="+this.value);
      $.getJSON("models.dahtml",     // url
         { makeId: this.value },   // request params
         function(json){           // callback
            var options = '';
            $(json.list.Region).each(function() {
                options += '<option value="' + this.id + '">' + this.name + '</option>';
            });
            $("select[name^=model]").html(options);
         }
      );
   }

    // When a model is selected, populate the year table
    function loadYears() {
        $.getJSON("years.dahtml",                // url
            {  modelId: this.value },                   // request params
            function(json){                             // callback
                var rows = '<tr><td>ddddd</td></tr>';
                $(json.list.year).each(function() {
                    rows += '<tr><td>' + this.value + '</td></tr>';
                });
                $("#yearTable tbody").html(rows);
            }
        );
    }
</script>


    <form name="carSelectorForm">

        Region: <select name="regionSelect">
            <c:forEach var="region" items="${regions}">
                <option value="${region.id}">${region.name}</option>
            </c:forEach>
        </select>

        Make: <select name="make">
	        <c:forEach var="region" items="${regions}">
	            <option value="${region.id}">${region.name}</option>
	        </c:forEach>
	    </select>
	    <p></p>
	    Model: <select name="model"></select>
	    <p></p>

        <table id="clubsListTable">
            <thead>
                <tr>
                    <th>Year</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

	</form>

    <!-- FORM Region -->
    <%-- Region --%>
    <form id="reservationFieldRequestForm" action="reserveFieldStep2.html" method="POST">
        <input type="hidden" name="clubId"/>
        <select id="selectRegionID" style="width: 150px;" name="regionId">
            <option value="--Select--">-- Make a selection --</option>
            <c:forEach items="${reservationFieldRequest.regions}" var="region">
                <c:choose>
                    <c:when test="${region.id == reservationFieldRequest.regionId}">
                        <option value="<c:out value="${region.id}"/>" selected="yes"><c:out value="${region.name}"/></option>
                    </c:when>
                    <c:otherwise>
                        <option value="<c:out value="${region.id}"/>"><c:out value="${region.name}"/></option>
                    </c:otherwise>
                </c:choose>

            </c:forEach>
        </select>
        boton
        <input type="submit" value="Go"/>
    </form>

<br/>


<!-- ************************************************ -->
<!-- pageName: formAdvancedFilter.jsp               -->
<!-- ************************************************ -->
